Skip to content

London | 26-ITP-May | Shahriar Ahmed | Sprint 2 | Wireframe#1319

Open
SABuilds wants to merge 17 commits into
CodeYourFuture:mainfrom
SABuilds:feature/wireframe
Open

London | 26-ITP-May | Shahriar Ahmed | Sprint 2 | Wireframe#1319
SABuilds wants to merge 17 commits into
CodeYourFuture:mainfrom
SABuilds:feature/wireframe

Conversation

@SABuilds
Copy link
Copy Markdown

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

I tried my best to keep to the layout of the wireframe png provided. I wrote articles for each one and provided a link for each article. I also added images I got from the web to meet the requirements listed in the readme.

Questions

How do I better adjust the sizing of images and changing sizes of grid elements?

@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit f77d3db
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6a0d93398b557e00080c07f1
😎 Deploy Preview https://deploy-preview-1319--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@SABuilds SABuilds added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label May 20, 2026
@SABuilds SABuilds added 🏕 Priority Mandatory This work is expected 📅 Sprint 2 Assigned during Sprint 2 of this module Submit:PR This work is submitted by creating a PR against CodeYourFuture's fork of this repo. Core This is a core task and should be completed by all trainees labels May 21, 2026
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Code is free of errors. Good job.

  • Currently the footer content and the article content can overlap, making the text difficult to read. Can you address this issue?

Image

How do I better adjust the sizing of images and changing sizes of grid elements?

I am afraid this question is a bit general and I don't know how to answer it. Have you tried consulting AI?

Comment thread Wireframe/style.css
Comment on lines 60 to 66
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
box-sizing: border-box;
border: 1px, solid, black;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a syntax error in this block of code. Can you fix it?

While https://jigsaw.w3.org/css-validator/ does not work when CSS code contains variables or nested selectors, we can still use it to check the syntax of a single block of CSS code.

Alternatively, you can feed your code to an AI tool to ask it to check for errors or possible improvement.

Comment thread Wireframe/index.html
Comment on lines +29 to +31
<p>
The purpose of a wireframe is to provide visual understanding for a web page layout. In other words, it shows the layout of webpage so clients can sign off on the layout before any extra creative work goes into it.
</p>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Breaking HTML text into multiple lines helps make the code easier to read, edit, and maintain while preserving the same rendered output.

VS Code formatter could be used to keep our code consistently formatted, including breaking long
lines of HTML text into multiple lines for easier editing and maintenance.

As a best practice, consider following this guide to enable VS Code's
"Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.

Please note that code formatters may not work correctly when the source code contains syntax errors.

Comment thread Wireframe/index.html
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
</article>
<article>
<img src="images.png" alt="">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Providing meaningful alt text is important because it ensures images are accessible to people using screen readers and also helps when images
fail to load, giving users essential context about the content or function of the image.

Can you give a more descriptive alt value to the images?

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Core This is a core task and should be completed by all trainees 🏕 Priority Mandatory This work is expected Reviewed Volunteer to add when completing a review with trainee action still to take. 📅 Sprint 2 Assigned during Sprint 2 of this module Submit:PR This work is submitted by creating a PR against CodeYourFuture's fork of this repo.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants